<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card v-loading="loading">
        <!-- 这是个加载内容的小圆圈 -->
        <!-- 这个主要负责样式的头部 -->
        <!-- 使用组件 -->
        <tree-tool :item="companyObj" @add-dept="handleShowAddDialog" />
        <!-- 使用组织框架tree树性 具体详细看组件element  default-expand-all:这个属性是再打开文件是把伸缩的文件直接的打开-->
        <el-tree
          :data="treeData"
          :props="{ label: 'name', children: 'children' }"
          default-expand-all
        >
          <!--用域插槽获取每行部门对象，让组件的结构支持自定义 data就是每行的部门对象-->
          <!-- 作用域插槽 -->
          <template #default="{ data }">
            <!-- 使用组件，传递自定义属性(父传子) -->
            <tree-tool
              :item="data"
              @del-dept="handleDelDept"
              @add-dept="handleShowAddDialog"
              @edit-dept="handleShowEditDialog"
            />
            <!-- @绑定事件，创建对象名 -->
          </template>
        </el-tree>
      </el-card>
      <!-- 使用add-dept组件 -->
      <!-- .sync修饰符只是个语法糖（就是好用） -->
      <!-- v-model指令:也只是个语法糖，本质是 :value + @input（面试题） -->
      <!--add添加部门  -->
      <add-dept
        :isShow.sync="isShow1"
        :dept-list="deptList"
        :item="deptObj"
        @add-dept-success="getDeptList"
      />
      <!-- 这个是管理弹框的x号 -->
      <!-- edit编辑部门 -->
      <edit-dept
        :isShow.sync="isShow2"
        :dept-list="deptList"
        :item="deptObj"
        @edit-dept-success="getDeptList"
      />
    </div>
  </div>
</template>

<script>
import { getDeptListAPI, delDeptAPI } from "@/api/departments"; //导入部门列表接口
import { list2Tree } from "@/utils/shift"; //单独封装一个js文件，tree然后导入导出即可显示树形我们所需要样式
import TreeTool from "./components/tree-tool.vue"; // 引入新增部门组件
import AddDept from "./components/add-dept.vue"; // 引入新增部门组件
import EditDept from "./components/edit-dept.vue";
export default {
  name: "DepartmentsView",
  components: {
    TreeTool,
    AddDept,
    EditDept,
  },
  data() {
    return {
      //部门列表
      deptList: [],
      //部门树形数据
      treeData: [],
      //公司信息对象
      companyObj: {
        name: "", //公司名称
        manager: "", //公司管理人
        id: "", //公司id
      },
      // 控制add-dept组件弹框的显示 true展开，false关闭
      isShow1: false,
      //控制edit-dept组件弹框的显示 true展开，false关闭
      isShow2: false,
      //记录当前部门操作对象
      deptObj: {},
      // 控制盒子的加载状态
      loading: false,
    };
  },
  created() {
    // 调用这个函数 获取部门列表
    this.getDeptList();
  },
  methods: {
    //获取部门列表
    async getDeptList() {
      this.loading = true; //请求之前显示loading状态
      //调接口发送请求  进行解构让代码更加的简便
      const { data } = await getDeptListAPI();
      // const { data: resp } = await getDeptListAPI();
      // 这是把树形的数据获取到这里
      // this.companyObj.id = resp.companyId
      this.companyObj.name = data.companyName;
      this.companyObj.manager = data.companyManage;
      this.companyObj.id = data.companyId;
      // 调用list2Tree函数，把depts部门列表转成树形结构
      // 对depts列表式的结构转换为树形结构，赋值给data数据，方可给tree组件使用
      this.treeData = list2Tree(data.depts, "");
      // console.log(list2Tree(data.depts, "")); //打印的结果
      //保存一份列表数据
      this.deptList = data.depts;
      this.loading = false; //请求之后关闭loading状态
    },
    // 处理删除部门  async和await解决异步问题，同时可以利用try和catch来解决错误问题
    async handleDelDept(deptId) {
      // console.log(depId);打印获取id
      try {
        //1.询问操作
        //this.$confirm 利用组件的原型链的查找机制
        await this.$confirm("此操作不可逆，确定删除嘛？", "温馨提示", {
          type: "warning", //这是个警告
          cancelButtonText: "取消", //组件
          confirmButtonText: "确定", //组件
        });
        //2.确定操作
        //2.1发请求（通知后台，从数据库中删除）
        await delDeptAPI(deptId);
        //2.2获取部门列表
        this.getDeptList();
        //2.3给个删除成功的提示
        this.$message.success("删除成功");
      } catch (err) {
        //3.取消操作(有个小bug默认数据不能删除)
        // this.$message.info("操作取消");
        this.$message.error(err.message || "操作失败");
      }
    },
    // 显示添加部门弹窗（要添加2个，一个容易进行报错）
    handleShowAddDialog(deptObj) {
      this.isShow1 = true; //控制add添加的部门的弹框
      //给正在操作部门对象赋值
      this.deptObj = deptObj;
    },
    // 显示添加部门弹窗
    handleShowEditDialog(deptObj) {
      this.isShow2 = true; //控制edit编辑的部门的弹框
      //给正在操作部门对象赋值
      this.deptObj = deptObj;
    },
  },
};
// 列表和数的互转
</script>
<style scoped lang="scss">
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
